<template>
	<view>
		<view class="search-box">
			<uni-search-bar @confirm="goToGoodsList()" 
			cancel-button="none" @input="input" :focus="true" :value="searchRes"></uni-search-bar>
		</view>
		<!-- 搜索历史 -->
		<view class="history-box" v-if="!searchList.length">
		  <!-- 标题区域 -->
		  <view class="history-title">
		    <text>搜索历史</text>
		    <uni-icons type="trash" size="17" @click="cleanHistory()"></uni-icons>
		  </view>
		  <!-- 列表区域 -->
		  <view class="history-list">
		    <uni-tag 
			:text="item" v-for="(item, i) in historyList" 
			:key="i"
			@click="pullHis(item)"></uni-tag>
		  </view>
		</view>
		
		<!-- 搜索结果列表 -->
		<view class="search-res-list" v-else>
			<view class="res-list" @click="goToGoodsList()">
				<view class="list">前往搜索</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
			<view class="res-list" v-for="item in searchList" :key="item.goods_id"
			@click="gotoDetail(item.goods_id)"
			>
				<view class="list">{{item.goods_name}}</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchRes:'',
				timer:'',
				searchList:[],
				historyList:["a","abc","saas"]
			};
		},
		methods:{
			input(e){
				if(e === '') return this.searchList = []
				if(this.timer) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.searchRes = e
					console.log(e)
					this.getSearchRes()
					this.tiemr=null
				},500)
			},
			async getSearchRes(){
				const {data: message} = await uni.$http.get('/api/public/v1/goods/qsearch',{
					query: this.searchRes
				})
				console.log(message)
				if(message.meta.status !== 200) return uni.$showMsg()
				this.searchList = message.message
				if(!message.message.length) uni.$showMsg('未找到此类商品')
			},
			gotoDetail(goods_id) {
			  this.resSetHis()
			  uni.navigateTo({
			    // 指定详情页面的 URL 地址，并传递 goods_id 参数
			    url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id
			  })
			},
			resSetHis(){
				const index = this.historyList.indexOf(this.searchRes)
								if(index === -1)
				this.historyList.unshift(this.searchRes)
				else{
								  this.historyList.splice(index,1)
								  this.historyList.unshift(this.searchRes)
				}
				this.permanentHis()
			},
			permanentHis(){
				uni.setStorageSync('SEARCH_HISTORY',JSON.stringify(this.historyList))		
			},
			// 清空搜索历史记录
			cleanHistory() {
			  // 清空 data 中保存的搜索历史
			  this.historyList = []
			  // 清空本地存储中记录的搜索历史
			  uni.setStorageSync('SEARCH_HISTORY', '[]')
			},
			pullHis(e){
				this.searchRes = e
				this.goToGoodsList()
			},
			//关键字搜索
			goToGoodsList(){
				this.resSetHis()
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?query=' + this.searchRes
				})
			}
		},
		onLoad() {
			this.historyList =JSON.parse(uni.getStorageSync("SEARCH_HISTORY") || '[]')
		}
	}
</script>

<style lang="scss">
	.search-box{
		  position: sticky;
		  top: 0;
		  z-index: 999;
	}
.uni-searchbar {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  position: relative;
  padding: 16rpx;
  /* 将默认的 #FFFFFF 改为 #C00000 */
  background-color: #c00000;
}
.history-box {
  padding: 0 5px;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}
.search-res-list{
	padding-left: 3px;
	.res-list{
		    font-size: 12px;
		    padding: 13px 0;
		    border-bottom: 1px solid #efefef;
		    display: flex;
		    // align-items: center;
		    // justify-content: space-between;
	.list{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-right: 3px;
	}
	}
}

</style>
